<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="libs/bootstrap.morphme.min.css" rel="stylesheet" />
    <title>书签展示</title>
    <style type="text/css">
        .pointer {
            cursor: pointer;
        }

        html {
            width: 780px;
        }
    </style>
</head>

<body>

    <div id="app">
        <div class="m-1 pb-5 mb-5">
            <div class="my-3 d-flex flex-row mx-1">
                <div class="d-flex flex-grow-1">
                    <input ref="inp" class="form-control" type="text" v-model="searchTxt" placeholder="搜索书签..."
                        autocomplete="off" />
                </div>
                <div class="d-flex justify-content-center align-items-center">
                    <button type="button" @click="search" class="btn btn-primary mx-2">查询</button>
                    <button type="button" @click="refresh" class="btn btn-primary">刷新缓存</button>
                </div>
            </div>
            <div>
                <span class="badge bg-light mx-1 my-1 pointer" v-for="tag in tagsAll"
                    @click="clickTag(tag)">{{tag}}</span>
            </div>
            <div class="mt-3 overflow-auto">
                <div class="list-group">
                    <a class="list-group-item list-group-item-action d-inline text-nowrap overflow-hidden text-truncate"
                        @click="goUrl(bm)" href="#" v-for="(bm,index) in bmList"
                        :class="index == selectIndex ? 'bg-dark text-light' : '' ">
                        <img :src="'chrome://favicon/'+bm.content"/>
                        <span class="text-decoration-underline">{{bm.description}}</span>
                        <span class="badge bg-secondary" v-if="bm.tags && bm.tags.length>0">{{bm.tags.join(",")}}</span>
                        <span class="badge bg-light mx-1">{{bm.content}}</span>
                    </a>
                </div>
            </div>


            <div class="alert alert-secondary mt-3" role="alert">
                <b>✔支持中文拼音,首字母检索</b><br />
                <b>✔支持多个关键字合并检索,多个关键字用空格分开,每个关键字都匹配才返回书签</b><br />
                <b>✔按键 ↑ ↓ 选择结果, 回车访问选中的书签</b><br />
                🚑修改浏览器书签后,需要点击 刷新缓存 按钮重新加载书签
                <br />
                🚑书签名称后用 || 连接标签,多个标签用逗号隔开;例如: 书签名称||标签1,标签2...
                <br />
            </div>

        </div>

    </div>

    <script src="libs/vue.min.js"></script>
    <script src="popup.js"></script>
</body>

</html>